import React, { useEffect } from 'react'
import Menu from '@/views/Menu'
import '@/assets/css/CouponInfo.scoped.css'
import { useLocation } from 'react-router'

const Component = () =>
{
  const params = new URLSearchParams(useLocation().search)
  const path = useLocation().pathname+useLocation().search
  const cid = params.get('id')
  const [status,setStatus] = useState<Number>(5)

  //info
  const [coupon,setCoupon] = useState<any>({})
  useEffect(()=>{
    getCoupon()
  },[])
  const getCoupon = async()=>{
    let result = await React.request.get('/coupon/info',{params:{cid}})
    setCoupon(result.data)
    setStatus(result.data.s??5)
  }
  //swiper
  const Swiper = ()=>{
    useEffect(()=>{
      getReceivedList()
    },[])
    const [receivedList,setReceivedList] = useState<Array<any>>([])
    const getReceivedList = async()=>{
      let result = await React.request.get('/coupon/received',{params:{cid}})
      setReceivedList(result)
    }
    if(receivedList.length){
        return (
          <>
            <React.UI.Swiper
              autoplay={true}
              autoplayInterval={3000}
              loop={true}
              indicator={() => false}
              direction='vertical' 
              style={{ '--height': '40px', 'border':'0px' }}
            >
              {receivedList.map((item,index)=>(
                <React.UI.Swiper.Item key={index}>
                <React.UI.NoticeBar style={{'border':'0px'}} content={`用户：${item.business.nickname} 在 ${item.createDate} 领取了优惠券`} color='info' />
              </React.UI.Swiper.Item>
              ))}
            </React.UI.Swiper>
          </>
        )
    }
  }
  //receive button
  const ReceiveButton = ()=>{
    const receive = async()=>{
      let result = await React.request.post('/coupon/receive',{cid})
      if(result.code){
        React.toast(result.msg)
        setStatus(1)
      }else{
        React.toast(result.msg,'','fail')
      }
    }
    const toLogin = ()=>{
      React.toast('未登录',`/business/login?path=${path}`,'fail')
      return false
    }
    if(status){
      if(status==4){
        return (<><React.UI.Button size="small" color='primary' onClick={receive}>立即领取</React.UI.Button></>)
      }else if(coupon.s==5){
        return (<><React.UI.Button size="small" color='primary' disabled>已结束</React.UI.Button></>)
      }else{
        return (<><React.UI.Button size="small" color='primary' disabled>已领取</React.UI.Button></>)
      }
    }else{
      return (<><React.UI.Button size="small" color='primary' onClick={toLogin}>立即领取</React.UI.Button></>)
    }
  }
  
  return (
    <>
      <React.UI.AutoCenter>
        <React.UI.Image src={coupon.thumb} width={'100%'} fit='fill' />
      </React.UI.AutoCenter>

      {/* 领取列表 */}
      <Swiper />

      {/* 优惠券 */}
      <div className='coupon_detail'>
        <div className='coupon_info'>
          <div className="left">
              <div className="left_top">
                  <div><span>{coupon.rate*100%10==0?coupon.rate*10:coupon.rate*100}</span>折</div>
                  <div className="top_info">
                      <div>{coupon.title}</div>
                      <div>COUPON</div>
                  </div>
              </div>
          </div>
          <div className="receive">
            <ReceiveButton />
          </div>
        </div>
        <div className="coupon_prompt">
          <div className="prompt_title">温馨提示：</div>
          <div>
              <span>•</span>
              领取后 {coupon.createDate} 至 {coupon.endDate} 有效
          </div>
          <div><span>•</span>仅限量{coupon.total}张，赶快领取！</div>
        </div>
      </div>
      <Menu />
    </>
  )
}

export default Component